<template>
  <ContentWrap>
    <!--    顶部查询项-->
    <el-form :model="form" inline>
      <el-form-item :label="t('staff.fullname')">
        <el-input
          v-model="form.fullname"
          clearable
          :placeholder="t('staff.fullnameMsg')"
          style="width: 250px"
        />
      </el-form-item>
      <el-form-item :label="t('staff.email')">
        <el-input
          v-model="form.email"
          clearable
          :placeholder="t('staff.emailMsg')"
          style="width: 250px"
        />
      </el-form-item>
      <el-form-item :label="t('staff.phone')">
        <el-input
          v-model="form.phone"
          clearable
          :placeholder="t('staff.phoneMsg')"
          style="width: 250px"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="initialize">{{
          t('common.search')
        }}</el-button>
        <el-button icon="Refresh" @click="reset">{{ t('common.reset') }}</el-button>
      </el-form-item>
    </el-form>
    <!--    操作项-->
    <div class="flex flex-items-center my-5">
      <el-button type="primary" @click="handleAdd">
        {{ t('staff.add') }}
      </el-button>
    </div>
    <!-- 表格主体 -->
    <el-table
      :data="dataList"
      highlight-current-row
      stripe
      border
      v-loading="tableLoading"
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ textAlign: 'center' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column :label="t('common.serialNumber')" prop="id" min-width="80" />
      <el-table-column :label="t('staff.worknumber')" prop="worknumber" min-width="120" />
      <el-table-column :label="t('staff.fullname')" prop="fullname" min-width="120" />
      <el-table-column :label="t('staff.avator')" min-width="100">
        <template #default="{ row }">
          <el-avatar v-if="row.avator" :src="row.avator" :size="40" />
          <el-avatar v-else :size="40" icon="UserFilled" />
        </template>
      </el-table-column>
      <el-table-column
        :label="t('staff.support_language')"
        min-width="100"
        prop="support_language_zh"
      />
      <el-table-column
        :label="t('staff.if_show')"
        min-width="100"
        prop="if_show"
        :show-overflow-tooltip="true"
      >
        <template #default="{ row }">
          {{ useEnumeratePicker(showList, row.if_show) }}
        </template>
      </el-table-column>
      <el-table-column :label="t('staff.job')" prop="job" min-width="120" />
      <el-table-column
        :label="t('staff.describe')"
        prop="describe"
        min-width="180"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        :label="t('staff.email')"
        prop="email"
        min-width="180"
        :show-overflow-tooltip="true"
      />
      <el-table-column :label="t('staff.phone')" prop="phone" min-width="140" />
      <el-table-column :label="t('staff.telegramid')" min-width="120" :show-overflow-tooltip="true">
        <template #default="{ row }">
          <span v-if="row.telegramid">{{ row.telegramid }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column :label="t('staff.twitterid')" min-width="120" :show-overflow-tooltip="true">
        <template #default="{ row }">
          <span v-if="row.twitterid">{{ row.twitterid }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column :label="t('staff.tiktokid')" min-width="120" :show-overflow-tooltip="true">
        <template #default="{ row }">
          <span v-if="row.tiktokid">{{ row.tiktokid }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column :label="t('staff.ins')" min-width="120" :show-overflow-tooltip="true">
        <template #default="{ row }">
          <span v-if="row.ins">{{ row.ins }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column :label="t('staff.zaloid')" min-width="120" :show-overflow-tooltip="true">
        <template #default="{ row }">
          <span v-if="row.zaloid">{{ row.zaloid }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>

      <el-table-column :label="t('staff.linkedin')" min-width="120" :show-overflow-tooltip="true">
        <template #default="{ row }">
          <span v-if="row.linkedin">{{ row.linkedin }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column :label="t('staff.facebook')" min-width="120" :show-overflow-tooltip="true">
        <template #default="{ row }">
          <span v-if="row.facebook">{{ row.facebook }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>

      <el-table-column :label="t('staff.lineid')" min-width="120" :show-overflow-tooltip="true">
        <template #default="{ row }">
          <span v-if="row.lineid">{{ row.lineid }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column :label="t('staff.wechat')" min-width="120" :show-overflow-tooltip="true">
        <template #default="{ row }">
          <span v-if="row.wechat">{{ row.wechat }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column :label="t('staff.whatsapp')" min-width="120" :show-overflow-tooltip="true">
        <template #default="{ row }">
          <span v-if="row.whatsapp">{{ row.whatsapp }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="t('staff.website')"
        prop="website"
        min-width="180"
        :show-overflow-tooltip="true"
      >
        <template #default="{ row }">
          <el-link :underline="false" type="primary" :href="row.website" target="_blank">{{
            row.website
          }}</el-link>
        </template>
      </el-table-column>
      <el-table-column :label="t('staff.create_time')" prop="create_time" min-width="180" />
      <el-table-column fixed="right" :label="t('common.operation')" width="180">
        <template #default="{ row }">
          <el-button @click="handleEdit(row)" size="small">
            {{ t('common.edit_t') }}
          </el-button>
          <el-button @click="handleDelete('single', row)" size="small" type="danger">
            {{ t('common.delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    分页-->
    <Pagination
      :total="paginationTotal"
      v-model:page="form.pageIndex"
      v-model:limit="form.pageSize"
      @pagination="initialize"
    />
    <!--    新增/编辑弹框-->
    <Add ref="dialogStaffRef" @refresh="initialize" />
  </ContentWrap>
</template>

<script setup lang="ts">
import Add from './components/add.vue'
import Pagination from '@/components/Pagination/index.vue'
import { ContentWrap } from '@/components/ContentWrap'
import { ElButton, ElMessage, ElMessageBox } from 'element-plus'
import { getStaffListApi, getStaffDelApi, getEnumApi } from '@/api/operator'

const { t } = useI18n()
const { push } = useRouter()

const tableLoading = ref<boolean>(false)
const dataList = ref<any[]>([])
const multipleSelection = ref<any[]>([])

const dialogStaffRef = ref()

const paginationTotal = ref<number>(0)
const form = ref<Record<string, any>>({
  fullname: '',
  worknumber: '',
  job: '',
  pageIndex: 1,
  pageSize: 20
})
const languageList = ref<Array<Record<string, any>>>([])
const showList = ref<Array<Record<string, any>>>([])
//获取枚举
const getDropDownBoxInfo = async () => {
  const resp = await getEnumApi({ field: 'all' })
  console.log(resp)
  languageList.value = resp.data.language
  showList.value = resp.data.if_show
}
//根据接口枚举匹配出中文名称
const useEnumeratePicker = (
  enumList: any[],
  field: string | number,
  key?: string,
  value?: string
) => {
  if (!enumList) return
  const matchItem =
    enumList.find((item: Record<string, any>) => item[value ?? 'value'] === field) || {}
  return matchItem[key ?? 'label'] || ''
}
//批量勾选
const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val
}
//点击新增
const handleAdd = () => {
  nextTick(() => {
    dialogStaffRef.value.getBackShow('add')
    dialogStaffRef.value.dialogVisible = true
  })
}
//点击编辑
const handleEdit = (row: Record<string, any>) => {
  nextTick(() => {
    dialogStaffRef.value.getBackShow('edit', JSON.parse(JSON.stringify(row)))
    dialogStaffRef.value.dialogVisible = true
  })
}
//点击删除
const handleDelete = (type: string, row: Record<string, any>) => {
  ElMessageBox.confirm(t('staff.confirmDelete'), t('common.tip'), {
    confirmButtonText: t('common.ok'),
    cancelButtonText: t('common.cancel'),
    type: 'warning'
  })
    .then(async () => {
      // 这里需要替换为实际的员工删除API
      await getStaffDelApi({
        ids:
          type === 'single'
            ? [row.id]
            : multipleSelection.value.map((item: Record<string, any>) => item.id)
      })
      ElMessage.success(t('staff.deleteSuccess'))
      await initialize()
    })
    .catch(() => {})
}

//初始化请求
const initialize = async () => {
  try {
    tableLoading.value = true
    // 这里需要替换为实际的员工信息获取API
    const resp = await getStaffListApi(form.value)
    getDropDownBoxInfo()
    console.log(resp)
    dataList.value = resp.data.list
    paginationTotal.value = resp.data.total
    tableLoading.value = false

    // 模拟数据，实际项目中替换为真实API调用
    // setTimeout(() => {
    //   dataList.value = [
    //     {
    //       id: 1,
    //       worknumber: 'EMP001',
    //       fullname: '张三',
    //       avator: '',
    //       job: '前端开发',
    //       describe: '负责公司前端项目开发和维护',
    //       email: 'zhangsan@example.com',
    //       phone: '13800138000',
    //       telegramid: 'zhangsan_tg',
    //       twitterid: '',
    //       tiktokid: '',
    //       lineid: '',
    //       wechat: 'zhangsan_wx',
    //       whatsapp: '',
    //       website: '',
    //       creator: 'admin',
    //       create_time: '2023-01-01 10:00:00',
    //       is_del: 0
    //     },
    //     {
    //       id: 2,
    //       worknumber: 'EMP002',
    //       fullname: '李四',
    //       avator: '',
    //       job: '后端开发',
    //       describe: '负责公司后端API开发',
    //       email: 'lisi@example.com',
    //       phone: '13900139000',
    //       telegramid: '',
    //       twitterid: 'lisi_twitter',
    //       tiktokid: 'lisi_tiktok',
    //       lineid: '',
    //       wechat: '',
    //       whatsapp: 'lisi_whatsapp',
    //       website: 'https://lisi.example.com',
    //       creator: 'admin',
    //       create_time: '2023-01-02 11:00:00',
    //       is_del: 0
    //     }
    //   ]
    //   paginationTotal.value = 2
    //   tableLoading.value = false
    // }, 500)
  } catch (e) {
    tableLoading.value = false
  }
}

//重置查询项
const reset = () => {
  form.value = {
    fullname: '',
    worknumber: '',
    job: '',
    pageIndex: 1,
    pageSize: 20
  }
  paginationTotal.value = 0
  initialize()
}

onMounted(() => {
  initialize()
})
</script>

<style lang="less" scoped>
.m-1 {
  margin: 2px;
}
</style>
